<template>
  <div class="mian-jing">
    <div class="hearder">
      <span>
      <!-- <span class="tuijian">推荐</span>
      <span class="new">最新</span> -->
      <router-link class="tuijian"
      :to="{path:'/index/mianjing/hmarticle',query:{username:username,token:token,listType:'推荐'} }"
      >推荐</router-link>
      <router-link class="new"
      :to="{path:'/index/mianjing/hmarticle',query:{username:username,token:token,listType:'最新'} }"
      >最新</router-link>
      </span>
      <div class="icon"></div>
    </div>
    <router-view :key="$route.fullPath"></router-view>
  </div>
</template>

<script>

export default {
    name: 'MianJing',
    data() {
        return {
          list: [],
          username: '',
          token: '',
          isNew: false,
        }
    },
    created() {
        // 确保在组件创建时获取路由参数
        this.username = this.$route.query.username;
        this.token = this.$route.query.token;
        console.log('' + this.username + this.token);
        // 设置默认的路由查询参数
        if (this.isNew) {
          this.$router.replace({ path: '/index/mianjing/hmarticle', query: { username: this.username, token: this.token ,listType:'推荐'} });
        } else {
          this.$router.replace({ path: '/index/mianjing/hmarticle', query: { username: this.username, token: this.token ,listType:'最新'} });
          this.username = this.$route.query.username;
          this.token = this.$route.query.token;
        }
    },
    methods: {
        
    }
}
</script>

<style lang="less" scoped>
.hearder {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: #f0f0f0; /* 可以根据需要调整背景颜色 */
  padding: 0 10px; /* 添加一些内边距 */
}

.hearder .tuijian,
.hearder .new {
  padding: 8px 16px;
  background-color: #66ccff;
  color: rgb(150, 150, 150);
  cursor: pointer;
  transition: background-color 0.3s;
  margin-right: 0; // 使两个按钮靠在一起
}

.hearder .tuijian:hover,
.isSelected{
  background-color: #0a181f;
  color: white;
}
.hearder .new:hover {
  background-color: #0a181f;
  color: white;
}

.hearder .icon {
  width: 80px;
  height: 40px;
  background-image: url('../assets/logomj.png'); /* 设置背景图片路径 */
  background-size: cover;
}
.hearder .router-link-exact-active{
  background-color: #0a181f;
  color: white;
}

</style>